'use client';

import React from 'react';
import { Flex } from 'antd';
import Image from 'next/image';
import styles from './index.module.scss';

interface BoxProps {
  icon: any;
  label: string;
  value: number;
  unit?: string;
  text?: string;
}

const Box: React.FC<BoxProps> = (props) => {
  const { icon, label, value, unit } = props;

  const formatData = (value: string | number) => {
    if (props.text === '采购总金额') {
      return Math.floor(Number(props.value) / 10000).toLocaleString()
    }
    return props.value.toString().length > 7
      ? Math.floor(props.value / 1000).toLocaleString() + 'K'
      : props.value.toLocaleString();
  };

  return (
    <Flex align="top" className={styles.box}>
      <Image
        src={icon?.src || ''}
        alt="icon"
        width={74}
        height={95}
        style={{ marginRight: '8px' }}
      />
      <Flex vertical style={{ paddingTop: 10 }}>
        <div className={styles.label}>{props.text}</div>
        <div className={styles.value}>
          {formatData(props.value)}
          <span className={styles.unit}>{props.unit}</span>
        </div>
      </Flex>
    </Flex>
  );
};

export default Box;
